<template>
  <div class="box-goods">
    <!-- 缩略图 -->
    <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        value=""
        :id="id"
        :checked="props.state"
        @change="onStateChange"
      />
      <label class="form-check-label" :for="id">
        <img class="thumb" :src="props.thumb" alt="" />
      </label>
    </div>

    <!-- 商品信息 -->
    <div class="right-box">
      <div class="top-title">{{ props.title }}</div>
      <div class="bottom-info">
        <span class="price">￥{{ props.price?.toFixed(2) }}</span>
        <!-- 购买数量 -->
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
// 依赖
import { defineProps, defineEmits } from 'vue'

// 自定义属性
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  },
  title: {
    type: String,
    required: true
  },
  thumb: {
    type: String,
    required: true
  },
  state: {
    type: Boolean,
    required: true
  },
  price: {
    type: Number,
    required: true
  }
})

// 自定义事件
const emit = defineEmits(['state-change'])

// 监听商品勾选状态的变化
const onStateChange = e => {
  emit('state-change', {
    id: props.id,
    value: e.target.checked
  })
}
</script>

<style lang="less" scoped>
.form-check-input[type='checkbox'] {
  border-radius: 10px;
  margin-top: 40px;
}
.box-goods {
  font-size: 12px;
  padding: 5px;
  display: flex;

  .thumb {
    width: 100px;
    height: 100px;
    margin-right: 8px;
  }

  .right-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top-title {
      font-weight: bold;
    }
    .bottom-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        font-weight: bold;
        color: red;
      }
    }
  }
}
</style>
